{extend name="public/nav"}

{block name="css"}
<style type="text/css">
  #uploadPreview {
      width: 168px;
      height: 168px;
      background-position: center center;
      background-size: cover;
      border: 4px solid #fff;
      -webkit-box-shadow: 0 0 1px 1px rgba(0, 0, 0, .3);
      display: inline-block;
  }
</style>
{/block}

{block name="main"}
<div class="admin-content">
    <div class="am-cf am-padding">
      <div class="am-fl am-cf"><strong class="am-text-primary am-text-lg">新增分类</strong> / <small>New category</small></div>
    </div>

    <hr/>

    <div class="am-g">

      <div class="am-u-sm-8 am-u-md-4 am-u-md-push-8">

      </div>

      <div class="am-u-sm-8 am-u-md-8 am-u-md-pull-4">
        <form class="am-form am-form-horizontal" method="post" action="{:U('sorting/update')}" id="conf_update" enctype="multipart/form-data">
          <div class="am-form-group">
            <label for="user-name" class="am-u-sm-4 am-form-label">上级分类 / Category parent</label>
            <div class="am-u-sm-8">
            <select name="pid">
              <option value="0" selected="selected">顶级分类</option>
              {foreach $list as $v}
              <option value="{$v.id}" {$res['pid'] == $v['id'] ?= 'selected'}>{$v.sname}</option>
              {/foreach}
            </select>
            <!-- <small>输入你的名字，让我们记住你。</small> -->
            </div>
          </div>

          <div class="am-form-group">
            <label for="user-email" class="am-u-sm-4 am-form-label">分类名称 / Category names</label>
            <div class="am-u-sm-8">
              <input type="text" id="user-email" placeholder="分类名称 / Category names" name="sname" value="{$res.sname}">
            </div>
          </div>

          <div class="am-form-group">
            <label for="user-phone" class="am-u-sm-4 am-form-label">分类图标 / Category icon</label>
            <div class="am-u-sm-8">
              <div id="uploadPreview" style="background-image:url({$res.image})"></div>
              <input id="uploadImage" type="file" name="icon" class="fimg1" onchange="PreviewImage();" />
              <small>只能上传png、jpg、gif图片，推荐分辨率为200*200</small>
            </div>
          </div>

          <div class="am-form-group">
            <div class="am-u-sm-8 am-u-sm-push-4">
                <input type="hidden" name="oldImage" value="{:substr(strrchr($res['image'],'/'),1);}">
                <input type="hidden" name="update_time" value="{:time()}">
                <input type="hidden" name="sid" value="{$res.id}">
                <input type="submit" class="am-btn am-btn-primary" value="保存修改">
            </div>
          </div>
        </form>
      </div>
    </div>
  </div>
{/block}

{block name="js"}
<script type="text/javascript">

    $('#conf_update').submit(function() {
        var index = layer.load(2);

        $(this).ajaxSubmit(function(data){
            layer.close(index);
            if(data == 1){
                layer.alert('保存成功！',{
                    icon:1,
                });
            }else{
                layer.alert(data,{
                    icon:2,
                });
            }
        })
        return false;
    })


    $("#uploadImage").change( function(){
      // Get a reference to the fileList
      var files = !!this.files ? this.files : [];

      // If no files were selected, or no FileReader support, return
      if (!files.length || !window.FileReader) return;

      // Only proceed if the selected file is an image
      if (/^image/.test( files[0].type)){

          // Create a new instance of the FileReader
          var reader = new FileReader();

          // Read the local file as a DataURL
          reader.readAsDataURL(files[0]);

          // When loaded, set image data as background of div
          reader.onloadend = function(){

         $("#uploadPreview").css("background-image", "url("+this.result+")");

          }
      $("#uploadPreview").attr("style","");
      }

  });
</script>
{/block}
